<template>
  <div>
    <!-- 立即登录 -->
    <div class="user_top">
      <div class="left">
        <div class="imgs_box">
          <van-uploader v-model="fileList" multiple />
        </div>
      </div>
      <div class="right">
        <p class="p1" @click="login">立即登录</p>
        <p class="p2">&nbsp;&nbsp;积分:0</p>
        <p @click="exit">退出登录</p>
      </div>
    </div>
    <!-- 滚动条消息 -->
    <van-notice-bar
      left-icon="volume-o"
      scrollable
      text="新上线更稳定的付费快递查询接口"
      class="scrollableColor"
    />
    <!-- 我的订单 -->
    <div class="div_center_box">
      <div class="div_center_big">
        <p>
          <img src="../assets/订单(22).png" width="30px" />
          <span class="span">我的订单</span>
        </p>
        <p></p>
        <p><img src="../assets/小于号(1).png" width="30px" /></p>
      </div>

      <ul class="ul_personal_box">
        <li>
          <img src="../assets/代评价(1).png" width="30px" />
          <p>待付款</p>
        </li>
        <li>
          <img src="../assets/代发货(1).png" width="30px" />
          <p>代发货</p>
        </li>
        <li>
          <img src="../assets/代收货(1).png" width="30px" />
          <p>待收货</p>
        </li>
        <li>
          <img src="../assets/代评价(1).png" width="30px" />
          <p>待评价</p>
        </li>
      </ul>
    </div>
    <!-- 我的余额 -->
    <div class="div_personal_bottom">
      <ul>
        <li>
          <img src="../assets/我的余额(1).png" />
          <p>我的余额</p>
        </li>
        <li>
          <img src="../assets/我的-砍价(1).png" />
          <p>我都砍价</p>
        </li>
        <li>
          <img src="../assets/新APP图标（Python）_我的礼卷(1).png" />
          <p>我的礼卷</p>
        </li>
        <li>
          <img src="../assets/我的收藏(1).png" />
          <p>我的收藏</p>
        </li>
        <li @click="address">
          <img src="../assets/我的-地址(1).png" />
          <p>我的地址</p>
        </li>
        <li>
          <img src="../assets/联系客服(1).png" />
          <p>联系客服</p>
        </li>
      </ul>
    </div>
    <!-- 底部提示文字 -->
    <div class="bottom_text">
      <p>The work of liu tao</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 上传图片
      fileList: [
        // { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        // { url: 'https://cloud-image', isImage: true },
      ],
    };
  },
  methods: {
    // 立即登录
    login() {
      this.$router.push({ path: "loginpage" });
    },
    // 退出登录 弹出之后跳转到登录页面
    exit() {
      if (localStorage.getItem("token")) {
        alert("退出成功");
        localStorage.removeItem("token");
        this.$router.push({ path: "loginpage" });
      }
    },
    address(){
      this.$router.push({path:'/address'})
    }
  },
};
</script>

<style lang='scss'>
body {
  background: rgb(248, 246, 246);
}
.van-uploader__upload {
  margin: 1px 1px 8px 0px;
}
// 立即登录
.user_top {
  width: 100%;
  height: 25vh;
  background: rgb(193, 177, 143);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  //   padding: 20px;
  box-sizing: border-box;
  color: white;
  font-size: 20px !important;
  .left {
    width: 30%;
    text-align: center;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    // background: chartreuse;
  }
  .left .imgs_box {
    width: 1.48rem;
    height: 1.48rem;
    border-radius: 50%;
    overflow: hidden;
    // background: red;
    display: flex;
    justify-content: center;
  }
  .right {
    .p1 {
      font-size: 0.5rem;
    }
    .p2 {
      width: 120px;
      height: 30px;
      background: rgb(182, 163, 125);
      border-radius: 5px;
      font-size: 0.28rem;
    }
  }
}
// 滚动条消息
.scrollableColor {
  color: red;
}
// 我的订单
.div_center_box {
  margin-top: 0.2rem;
  width: 100%;
  background: white;
}
.div_center_big {
  width: 100;
  height: 1rem;
  border-bottom: 1px solid ghostwhite;
  align-items: center;
  display: flex;
  justify-content: space-between;
  span {
    margin-left: 0.3rem;
  }
}
.ul_personal_box {
  width: 100%;
  height: 1.3rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  img {
    width: 0.5rem;
  }
}
.div_personal_bottom {
  width: 100%;
  margin-top: 0.3rem;
  background: white;
  ul {
    width: 100%;
    height: 3rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
    li {
      width: 30%;
    }
    img {
      width: 0.5rem;
    }
    p {
      margin-top: 0.2rem;
      font-size: 13px;
    }
  }
}
#p1 {
  width: 100%;
  text-align: center;
  font-size: 13px;
}
#div_bottom {
  width: 100%;
  background: white;
  height: 2.1rem;
}
// 我的余额
.div_personal_bottom {
  width: 100%;
  margin-top: 0.3rem;
  background: white;
  ul {
    width: 100%;
    height: 3rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
    li {
      width: 30%;
    }
    img {
      width: 0.6rem;
    }
    p {
      margin-top: 0.2rem;
    }
  }
}
#p1 {
  width: 100%;
  text-align: center;
}
#div_bottom {
  width: 100%;
  background: white;
  height: 2.1rem;
}
// 底部提示文字
.bottom_text {
  width: 100%;
  height: 0.54rem;
  line-height: 0.54rem;
  background: rgb(238, 236, 236);
  text-align: center;
  color: grey;
  font-size: 10px;
}
</style>